<template>
  <div class="header-container">
    <!-- <span id="blog_name">blog</span> -->

    <nav id="menus">
      <!-- <div id="search-button">
        <a href="javascript:;">
          <i class="el-icon-search"></i>
          <span>搜索</span>
        </a>
      </div> -->
      <div class="menus_items">
        <div class="menus_item">
          <a href="javascript:;" @click.prevent="dialogFormVisible = true"> <i class="el-icon-search"></i>搜索</a>
          <!-- 模态框 -->
          <el-dialog title="搜索" :visible.sync="dialogFormVisible">
            <el-form :model="form" class="demo-ruleForm" @keyup.enter.native="search(form)">
              <el-form-item label="文章关键词" :label-width="formLabelWidth">
                <el-input v-model="form.info" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item class="style-btn">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="search(form)">确 定</el-button>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-divider></el-divider>
              <!-- 查询出的结果 -->
              <el-table :data="gridData">
                <el-table-column property="created_time" label="日期" width="200"></el-table-column>
                <el-table-column property="author" label="作者" width="200"></el-table-column>
                <el-table-column property="title" label="标题"></el-table-column>
              </el-table>
            </div>
          </el-dialog>
        </div>
        <div class="menus_item">
          <a href="javascript:;" @click.prevent="toHome"> <i class="el-icon-s-home"></i>首页</a>
        </div>
        <div class="menus_item">
          <a href="javascript:;" @click.prevent="toTagsPage"><i class="el-icon-s-management"></i>标签</a>
        </div>
        <div class="menus_item">
          <a href="javascript:;" @click.prevent="toArtitalk"> <i class="el-icon-s-comment"></i>留言板</a>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      // userInfo: {}
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        info: ''
      },
      articleInfo: [],
      formLabelWidth: '120px'
    }
  },
  methods: {
    toHome () {
      const username = localStorage.getItem('username')
      // const _id = localStorage.getItem('_id')
      // this.queryUser(_id)
      // const token = localStorage.getItem('token')
      // console.log(username, _id, token)
      // if (username !== '' && _id !== '' && token !== '') {
      // const comName = 'UserModule'
      // this.$emit('shareComName', comName)
      // }
      this.$router.push({
        name: 'BlogHome',
        params: {
          username
        }
      })
    },
    toTagsPage () {
      this.$router.push('/blog/tagspage')
    },
    toArtitalk () {
      this.$router.push('/blog/artitalkpage')
    },
    async search (form) {
      const { data: res } = await this.$api.queryByTitle({
        info: form.info
      })
      this.gridData = res.data
      for (let i = 0; i < this.gridData.length; i++) {
        this.gridData[i].created_time = this.$forMat(this.gridData[i].created_time)
      }
      // console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 5px 6px -5px rgb(133, 133, 133, 0.6);
  -webkit-box-shadow: 0 5px 6px -5px rgb(133, 133, 133, 0.6);
  font-size: 1.3em;
  margin-bottom: 0.5rem;
  transition: all 0.5s;
}
// #blog_name {
//   flex: 1;
//   font-size: 20px;
//   font-weight: 700;
//   margin-left: 20px;
// }
#menus {
  display: flex;
  flex: 1;
  justify-content: center;
  margin-right: 20px;
  height: 100%;
}
// #search-button {
//   display: inline-block;
//   width: 65px;
//   height: 24px;
//   // background-color: rgb(0, 0, 0);
//   text-align: center;
//   line-height: 24px;
//   // font-weight: 700;
//   font-size: 16px;
// }
.style-btn {
  text-align: right;
}
.menus_items {
  display: inline;
  height: 100%;
}
.menus_item {
  display: inline-block;
  height: 100%;
  // margin-right: 10px;
  margin: 0 15px;
}
.menus_item a,
#search-button a {
  display: flex;
  font-size: 18px;
  color: black;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.menus_item a:hover {
  // color: #ccc;
  border-bottom: 3px solid #ff8200;
  transition: all 0.1s;
}
/deep/ .el-dialog__body {
  padding: 30px 20px 0px;
}
/deep/ .el-dialog__footer {
  padding: 0px 20px 20px;
}
</style>
